React Components Explained — Functional vs Class Component (বাংলায় বিস্তারিত)

React-এর মূল ভিত্তি হলো Component। প্রতিটি UI অংশকে ছোট, পুনর্ব্যবহারযোগ্য (Reusable) component হিসেবে তৈরি করা যায়। একটি Component মানে হচ্ছে—একটি ফাংশন বা ক্লাস যা কিছু UI রিটার্ন করে। React-এ দুই ধরনের Component দেখা যায়:

• Functional Components (আধুনিক, সহজ এবং সর্বাধিক ব্যবহৃত)
• Class Components (পুরোনো স্টাইল, এখন কম ব্যবহার হয়)

এখানে আমরা দুই ধরনের Component-এর বিস্তারিত ব্যাখ্যা, পার্থক্য, উদাহরণ এবং Best Practice আলোচনা করবো।

Component কী?

Component হলো একটি ছোট UI Block যা:

• নিজস্ব কোড ধারণ করে
• নিজস্ব UI রেন্ডার করে
• Props গ্রহণ করতে পারে
• State ধরে রাখতে পারে (Functional + Hooks)
• Reusable (বারবার ব্যবহার করা যায়)

উদাহরণ: Navigation Bar, Button, Card, Product Item ইত্যাদি সবই Component।

1. Functional Component — আধুনিক React-এর স্ট্যান্ডার্ড

Functional Component হলো একটি সাধারণ JavaScript function, যা JSX রিটার্ন করে।

Functional Component Example:

function Welcome(props) {
  return (
    <div>
      <h2>হ্যালো, {props.name}!</h2>
      <p>React Functional Component-এ স্বাগতম।</p>
    </div>
  );
}

export default Welcome;

কেন Functional Component বেশি জনপ্রিয়?

• কোড ছোট ও পরিষ্কার
• Hooks ব্যবহার করা যায় (useState, useEffect ইত্যাদি)
• ফাস্ট পারফরম্যান্স
• কম Boilerplate কোড
• Class Component-এর lifecycle Method-এর ঝামেলা নেই

React 16.8 থেকে Hooks আসার পর Functional Component ১০০% শক্তিশালী হয়ে গেছে, তাই এখন এটিই industry standard।

2. Class Component — পুরোনো কিন্তু এখনও বুঝা প্রয়োজন

Class Component হলো একটি JavaScript Class যা React.Component কে extend করে।

Class Component Example:

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return (
      <div>
        <h2>হ্যালো, {this.props.name}!</h2>
        <p>React Class Component Example</p>
      </div>
    );
  }
}

export default Welcome;

Class Component-এর বৈশিষ্ট্য:

• this keyword ব্যবহারের প্রয়োজন
• Lifecycle Methods ব্যবহার করা হয়
• Constructor দিয়ে state initialize করতে হয়
• Hooks ব্যবহার করা যায় না

Class Component-এ State Example:

class Counter extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h3>Count: {this.state.count}</h3>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

Functional vs Class Component — Side-by-Side Comparison

Real-Life Example: একই কাজ Functional এবং Class Component-এ

Functional Version

function Message() {
  const [text, setText] = useState("Hello!");

  return (
    <div>
      <h3>{text}</h3>
      <button onClick={() => setText("Welcome to React!")}>
        Change Message
      </button>
    </div>
  );
}

Class Version

class Message extends Component {
  constructor() {
    super();
    this.state = { text: "Hello!" };
  }

  change = () => {
    this.setState({ text: "Welcome to React!" });
  };

  render() {
    return (
      <div>
        <h3>{this.state.text}</h3>
        <button onClick={this.change}>Change Message</button>
      </div>
    );
  }
}

দেখতে পাচ্ছেন, Functional Component অনেক ছোট এবং সহজ।

React-এর ভবিষ্যৎ — কোনটি শিখবেন?

• Functional Component → অবশ্যই শিখতে হবে (Modern React এর ভিত্তি)
• Class Component → Concept হিসেবে জানা ভালো, কিন্তু প্রয়োজন কম

Industry-তে এখন সবকিছুই Hooks + Functional Component ভিত্তিক, তাই নতুনদের Functional Component দিয়েই React শেখা উচিত।

Best Practices (সেরা অভ্যাস)

• সর্বদা Functional Component ব্যবহার করুন
• Class Component শুধু পুরোনো কোডবেস বুঝতে শিখুন
• Component ছোট রাখুন — Single Responsibility Principle অনুসরণ করুন
• Reusable component ডিজাইন করুন (button, card, input ইত্যাদি)

উপসংহার

React-এর Component System পুরো UI-কে ভাগ করে ছোট manageable অংশে ভাগ করে। Functional Component হচ্ছে React-এর বর্তমান ও ভবিষ্যৎ — যা Hooks-এর মাধ্যমে আরও শক্তিশালী হয়েছে। যদি আপনি React শিখতে চান, তাহলে Functional Components, Props, State এবং Hooks শিখলেই ৮০% React আপনার আয়ত্তে থাকবে।

এই কনটেন্ট শিক্ষার্থীদের জন্য খুব সহজ করে লেখা হয়েছে। চাইলে আমি প্রতিটি টপিকের আলাদা PDF বা আরও উদাহরণ সহ বিস্তারিত তৈরি করে দিতে পারি।